<template>
  <div>
    <header>
      <section>
        <label for="title">ToDoList</label>
        <input
          type="text"
          id="title"
          name="title"
          placeholder="添加ToDo"
          required="required"
          autocomplete="off"
          @keyup="jianpan"
          v-model="val"
        />
      </section>
    </header>
    <todolist :arr="arr" @jianpan="jianpan" @shan="shan(index)"></todolist>
    <footer></footer>
  </div>
</template>
<style>
.inp {
  position: relative;
  margin-left: -15px;
}
</style>
<script>
import todolist from './todo_listzi.vue'
export default {
  components:{
    todolist
  },
  data() {
    return {
      arr: [],
      val: "",
      list: "",
      bool: false,
      inp: '<input type="text" v-if="bool">',
      val1: "",
      msg: "",
    };
  },
  methods: {
    /* 首先键盘事件判断是不是回车键 */
    jianpan(e) {
      if (e.keyCode == 13) {
        this.arr.push({ name: this.val, checked: false, });
        this.val = "";
      }
    },
    /* 删除事件 */
    shan(index) {
      this.arr.splice(index, 1);
    },
    /* 双击事件 */
    shuangji() {
      this.bool = true;
    },
    /* 新键盘事件 */
    jianpan1(e) {
      if (e.keyCode == 13) {
        this.val = this.val1;
        this.bool = false;
        this.arr[0].name = this.val;
        this.val = "";
      }
    },
  },
    /* stop代码跟event.stopPropagation()效果一样都是阻止冒泡事件 */
// <div id="app"> 
// 　　<div class="outeer" @click="outer"> 
// 　　　　<div class="middle" @click="middle"> 
// 　　　　　　<button @click="inner">点击我(^_^)</button>
//  　　　　</div>
//  　　</div> 
// 　　<p>{{ message }}</p> 
// </div>
//  let app = new Vue({
//  　　el: '#app', 
// 　　 data () { 
// 　　　　return { message: '测试冒泡事件' } }, 
// 　　methods: { 
// 　　　　inner: function () {
// 　　　　　　 this.message = 'inner： 这是最里面的Button' 
// 　　　　}, 
// 　　　　middle: function () { 
// 　　　　　　this.message = 'middle: 这是中间的Div' 
// 　　　　}, 
// 　　　　outer: function () { 
// 　　　　　　this.message = 'outer: 这是外面的Div' 
// 　　　　} 
// 　　} 
// })

// .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为
// <div id="app"> 
// 　　<div class="outeer" @click.stop="outer"> 
// 　　　　<div class="middle" @click.stop="middle"> 
// 　　　　　　<button @click.stop="inner">点击我(^_^)</button>
//  　　　　</div>
//  　　</div> 
// </div>

// .capture：与事件冒泡的方向相反，事件捕获由外到内
// <div id="app"> 
// 　　<div class="outeer" @click.capture="outer"> 
// 　　　　<div class="middle" @click.capture="middle"> 
// 　　　　　　<button @click.capture="inner">点击我(^_^)</button>
//  　　　　</div>
//  　　</div> 
// </div>
// .self：只会触发自己范围内的事件，不包含子元素
// <div id="app"> 
// 　　<div class="outeer" @click.self="outer"> 
// 　　　　<div class="middle" @click.self="middle"> 
// 　　　　　　<button @click.stop="inner">点击我(^_^)</button>
//  　　　　</div>
//  　　</div> 
// </div>
// .once：只会触发一次
};
</script>

